<template lang="pug">
//-
  示例
  pug:
    amultipicker(:range="data.service.items" range-key="title" v-model:value="data.service.value" v-model:value_text="data.service.value_text" @change="")
      view(:class="{placeholder: !data.service.value_text}") {{ data.service.value_text || '请选择' }}
  js:
    const data = reactive({
      service: {items: [{id: 1, title: '模拟3'},{id: 2, title: '模拟5'}], value: [], value_text: ''},
    })
view.a-multi-picker
  view.flex.arrow.right(@click="data.popup.show = true"): slot

  apopup(position="bottom" v-model:show="data.popup.show")
    view.popup-selector.bg.white
      view.flex
        view.txt.grey.mod(@click="methods._cancel") 取消
        view.grow.center.bold.mod {{ title }}
        view.txt.blue.mod(@click="methods._commit") 确定
      scroll-view.scroll-y(scroll-y)
        view.item.flex(v-for="n,i in range" @click="methods._pick(i)")
          view.grow {{ n[rangeKey] }}
          icon(size="18"
           :type="data.sels.has(i)?'success':'circle'"
           :color="`var(--font-color-${data.sels.has(i)?'blue':'light'})`")
</template>
<script setup>
import {reactive, watch} from 'vue'
//import {home} from '/common/config/url.json'
//import {__get} from '/common/script/req.promise'
//import {_tip, _go} from '/common/script/tip'
//import {onLoad} from '@dcloudio/uni-app'

const emits = defineEmits(['update:value', 'update:value_text', 'change'])
const props = defineProps({
  range: {type: Array, default: [{title: '模拟'}, {title: '模拟2'}]},
  rangeKey: {type: String, default: 'title'},
  value: {type: Array, default: []},
  value_text: String, // 选中的项合成字符串
  title: String,
})

const data = reactive({
  popup: {show: false},
  sels: new Set()
})

watch(()=>props.value,(value)=>{
  data.sels = new Set(value)
})

const methods = {
  _cancel(){
    data.popup.show = false
  },
  _commit(){
    const {range, rangeKey} = props
    const text = [...data.sels].map(i=>range[i][rangeKey]).join(',')
    emits('update:value', [...data.sels])
    emits('update:value_text', text)
    emits('change', [...data.sels])
    data.popup.show = false
  },
  _pick(i){
    const {sels} = data
    if(sels.has(i)){
      sels.delete(i)
    }else{
      sels.add(i)
    }
  }
}

</script>
<style lang="scss" scoped>
@use '/common/scss/mixin.scss' as *;
.popup-selector{
  padding-bottom: 45rpx;
  .scroll-y{
    height: 400rpx;
    .item{
      padding: var(--multipicker-item-tb-padding, 0) 25rpx;
      height: var(--multipicker-item-height, 100rpx);
      &:not(:first-child){
        border-top: 1px solid #f7f7f7;
      }
    }
  }
}
</style>